<template>

  <div>
    <div class="app-container">
      <div class="search-container">
        <!-- 查询条件 -->
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="角色名称">
            <el-input v-model="form.RoleName" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRole()">查询</el-button>
            <el-button type="danger" @click="AddRole()">新增角色</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="rname" label="角色名称" />
          <el-table-column prop="descibe" label="角色描述" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)">查看</el-button>
              <el-button v-if="scope.row.rname != '管理员'" type="danger"
                @click="handleDelete(scope.row.rid)">删除</el-button>
              <el-button type="primary" :disabled="true" @click="givePermission(scope.row.rid)">管理权限</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <table style="margin: 8px auto">
          <tr>
            <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
              :page-sizes="[10, 15, 30, 50]" :background="true" layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </tr>
        </table>

        <!-- 查看信息 -->
        <el-dialog v-model="dialogVisible" title="角色信息" width="500">
          <template #footer>
            <div class="dialog-footer">
              <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="角色名">
                  <el-input v-model="forms.rname" />
                </el-form-item>
                <el-form-item label="角色描述">
                  <el-input v-model="forms.descibe" />
                </el-form-item>
                <el-form-item>
                  <!-- <el-button @click="dialogVisible = false">取消</el-button> -->
                  <el-button type="primary" @click="dialogVisible = false">
                    确定
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-dialog>

        <!-- 新增角色 -->
        <el-dialog v-model="dialogVisible1" title="角色信息" width="500">
          <template #footer>
            <div class="dialog-footer">
              <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="名称">
                  <el-input v-model="formAdd.rname" />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="formAdd.descibe" />
                </el-form-item>
                <el-form-item>
                  <el-button @click="dialogVisible1 = false" type="danger">关闭</el-button>
                  <el-button type="primary" @click="save()">
                    保存
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-dialog>

        <!-- 分配权限 -->
        <div>
          <el-dialog v-model="dialogVisiblePermission" title="角色信息" width="500">
            <template #footer>
              <div class="dialog-footer" hight="300px">
                <el-tree ref="treeref" :expand-on-click-node="false" :default-expand-all="true" style="max-Width: 600px"
                  :data="data" show-checkbox node-key="value" :default-checked-keys="idList" :props="defaultProps" />
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="savePermission()">确 定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>

      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import PermissionAPI from '@/api/PermissionsManagement/index'
import { RoleModel } from '@/api/PermissionsManagement/model'

//分配权限
const dialogVisiblePermission = ref(false)
const idList = ref([])
const defaultProps = {
  children: 'children',
  label: 'label',
  valie: 'value'
}
const updform = reactive({
  roleId: 0,
  perid: []
})
const givePermission = (rid: number) => {
  dialogVisiblePermission.value = true
  idList.value = []
  //树形
  getTree()
  //获取角色的权限
  PermissionAPI.getRolePermission(rid).then(res => {
    res.data.forEach(item => {
      idList.value.push(item.perid)
    })
  })
  debugger;
  updform.roleId = rid
}
//树形
const data = ref([])
const getTree = () => {
  PermissionAPI.getPermissionList(0).then(res => {
    data.value = res.data
  })
}

//修改权限
const treeref = ref([])
const savePermission = () => {
  updform.perid = treeref.value.getCheckedKeys()
  debugger;
  PermissionAPI.updRPermission(updform).then(res => {
    if (res.data == 1) {
      ElMessage.success('修改成功')
      dialogVisiblePermission.value = false
      //刷新网站页面
      location.reload()
    }
  })
}

//查看
const forms = reactive({
  rname: "",
  descibe: ""
})
//添加
const formAdd = reactive({
  rname: "",
  descibe: "",
  remark: "NULL"
})
//显示
const form = reactive<RoleModel>({
  RoleName: "",
  PageSize: 15,
  PageIndex: 1
})
//分页
const page = reactive({
  totalCount: 0,
  pageCount: 0
})
//获取角色列表
const tableData = ref([])
const getRole = () => {
  PermissionAPI.getRole(form).then((res: any) => {
    tableData.value = res.data.data
    page.totalCount = res.data.totalCount
    page.pageCount = res.data.pageCount
  })
}
//分页
//调整页容量
const handleSizeChange = (val: number) => {
  form.PageSize = val
  getRole()
}
//调整页码
const handleCurrentChange = (val: number) => {
  form.PageIndex = val
  getRole()
}
const dialogVisible = ref(false)
//查看角色信息
const handleEdit = (data: any) => {
  dialogVisible.value = true
  forms.rname = data.rname
  forms.descibe = data.descibe
}
//添加角色
const dialogVisible1 = ref(false)
const AddRole = () => {
  dialogVisible1.value = true
}
//保存
const save = () => {
  PermissionAPI.addRole(formAdd).then((res: any) => {
    debugger;
    if (res.data > 0) {
      ElMessage.success("添加成功")
      getRole()
      dialogVisible1.value = false
    } else {
      ElMessage.error("添加失败")
      dialogVisible1.value = false
    }
  })
}
//删除
const handleDelete = (ids: any) => {
  const id = reactive({
    id: ids
  })
  ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      PermissionAPI.deleteRole(id).then((res: any) => {
        if (res.data > 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          getRole()
        }
        else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          });
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//生命周期
onMounted(() => {
  //角色
  getRole()

})

</script>